<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>套餐人数饼形图</title>
    <meta name="keywords" content="传智健康">
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
    <link rel="stylesheet" href="../../../static/plugins/elementui/index.css">
    <link rel="stylesheet" href="../../../static/plugins/font-awesome/css/font-awesome.min.css">
</head>
<body>
<div id="app">


    <div id="main" style="width: 600px;height:400px;">

    </div>
</div>
</body>
<script src="../../../static/js/vue.js"></script>
<script src="../../../static/plugins/elementui/index.js"></script>
<script src="../../../static/js/axios-0.18.0.js"></script>
<script src="../../../static/js/echarts.min.js"></script>
<script>
    /*  echarts.init(document.getElementById("main")).setOption({
          tooltip: {
              trigger: 'item'
          },
          legend: {
              top: '5%',
              left: 'center'
          },
          series: [
              {
                  name: '访问来源',
                  type: 'pie',
                  radius: ['40%', '70%'],
                  avoidLabelOverlap: false,
                  label: {
                      show: false,
                      position: 'center'
                  },
                  emphasis: {
                      label: {
                          show: true,
                          fontSize: '40',
                          fontWeight: 'bold'
                      }
                  },
                  labelLine: {
                      show: false
                  },
                  data: [
                      {value: 1048, name: '搜索引擎'},
                      {value: 735, name: '直接访问'},
                      {value: 580, name: '邮件营销'},
                      {value: 484, name: '联盟广告'},
                      {value: 300, name: '视频广告'}
                  ]
              }
          ]
      })*/

    var app = new Vue({
        el: "#app",
        methods: {
            numberOfReservationsPieChart() {
                axios.get("/setMeal/packageNumberPieChart").then((res) => {
                    if (res.data.code == '-998') {
                        this.$message({
                            showClose: true,
                            message: '你无该权限!',
                            type: 'error'
                        });
                    } else if (res.data.code == null || res.data.code == '') {
                        console.log(res.data.setMealCount)
                        for (var i=0;i<res.data.setMealCount.length;i++){
                            console.log(res.data.setMealCount[i].value)
                            console.log(res.data.setMealCount[i].name)
                        }
                    this.$nextTick(() =>{
                        echarts.init(document.getElementById("main")).setOption({
                            tooltip: {
                                trigger: 'item'
                            }, legend: {
                                top: '5%',
                                left: 'center'
                            }, series: [
                                {
                                    name: '套餐预约占比',
                                    type: 'pie',
                                    radius: ['40%', '70%'],
                                    avoidLabelOverlap: false,
                                    label: {
                                        show: false,
                                        position: 'center'
                                    },
                                   emphasis: {
                                        label: {
                                            show: true,
                                            fontSize: '40',
                                            fontWeight: 'bold'
                                        }
                                    },
                                    labelLine: {
                                        show: false
                                    },
                                    data:res.data.setMealCount

                                }
                            ]
                        });
                    })
                    } else {
                        this.$message({
                            showClose: true,
                            message: '显示失败!',
                            type: 'error'
                        });
                    }
                });
            }
        }, created() {
            this.numberOfReservationsPieChart();
        }
    });
</script>
</html>